<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>头部导航栏布局</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="outer">

        <!-- 侧边栏 -->
        <div class="toolBar">
            <!-- 侧边栏的内容 -->
            <div class="content"></div>
            <!-- 面包屑 -->
            <div class="menu"></div>
            <!-- 中间导航区域 -->
            <ul class="navList">
                <li>
                    <i></i>
                    <p>商品会员</p>
                </li>
                <li>
                    <i></i>
                    <p>购物车</p>
                </li>
                <li>
                    <i></i>
                    <p>我的关注</p>
                </li>
                <li>
                    <i></i>
                    <p>我的足迹</p>
                </li>
                <li>
                    <i></i>
                    <p>我的消息</p>
                </li>
                <li>
                    <i></i>
                    <p>咨询静哥</p>
                </li>
            </ul>
            <!-- 回到顶部 -->
            <div class="back"></div>
        </div>
        <!-- 头部区域 -->
        <header class="header">
            <div class="headerTop_out">
                <div class="headerTop">
                    <div class="headerTop_left">
                        <p>尚品汇欢迎您</p>
                        <p>
                            请
                            <a href="javascript:;">登录</a>
                            <a href="javascript:;">免费注册</a>
                        </p>
                    </div>
                    <div class="headerTop_right">
                        <a href="javascript:;">我的订单</a>
                        <a href="javascript:;">我的购物车</a>
                        <a href="javascript:;">我的尚品汇</a>
                        <a href="javascript:;">尚品汇会员</a>
                        <a href="javascript:;">企业采购</a>
                        <a href="javascript:;">关注尚品汇</a>
                        <a href="javascript:;">合作招聘</a>
                        <a href="javascript:;">商家后台</a>
                    </div>
                </div>

            </div>
            <div class="headerBottom">
                <h1 class="logo">
                    <a href="javascript:;">
                        <img src="./images/Logo.png" alt="">
                    </a>
                </h1>
                <div class="header_search">
                    <input type="text">
                    <button>搜索</button>
                </div>
            </div>
        </header>
        <div class="allnav_outer">
            <div class="allnav">
                <h2>所有商品分类</h2>
                <nav>
                    <a href="javascript:;">服装城</a>
                    <a href="javascript:;">美妆馆</a>
                    <a href="javascript:;">尚品汇超市</a>
                    <a href="javascript:;">全球购</a>
                    <a href="javascript:;">闪购</a>
                    <a href="javascript:;">团购</a>
                    <a href="javascript:;">有趣</a>
                    <a href="javascript:;">秒杀</a>
                </nav>
            </div>
        </div>
        <section class="con">
            <div class="conPoint">
                <a href="javascript:;">手机、数码、通讯手机</a>
                <a href="javascript:;">Apple苹果</a>
                <a>iphone 6S系类</a>
            </div>
            <div class="mainCon">
                <div class="previewArea">
                    <div class="preview">
                        <!-- 小图区域 -->
                        <div class="smallArea">
                            <img src="./images/s1.png" alt="">
                            <!-- 蒙版区域 -->
                            <div class="mask"></div>
                        </div>
                        <!-- 大图区域 -->
                        <div class="bigArea">
                            <img src="./images/b1.png" alt="">
                        </div>
                    </div>
                    <div class="prescroll">
                        <p class="left">&lt;</p>
                        <div class="listOut">
                            <ul class="list">
                                <!-- <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li>
                                <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li>
                                <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li>
                                <li><img src="./images/s1.png" alt=""></li>
                                <li><img src="./images/s2.png" alt=""></li>
                                <li><img src="./images/s3.png" alt=""></li> -->
                            </ul>
                        </div>
                        <p class="right">&gt;</p>
                    </div>
                </div>
                <div class="detailArea">
                    <div class="priceArea">
                        <!-- <h3 class="title">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
                        <p class="con1">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</p>
                        <div class="price">
                            <div class="priceDetail">
                                <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
                                <p>￥ <span>5299</span> 元</p>
                            </div>
                            <div class="buy">
                                <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>
                                <p><span>加价购</span>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品</p>
                            </div>
                        </div>
                        <div class="support">
                            <div class="supportDetail">
                                <p>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>
                                <p>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</p>
                            </div>
                            <div class="address">
                                <p>配&nbsp;送&nbsp;至</p>
                                <p>广东省 深圳市 宝安区</p>
                            </div>
                        </div> -->
                    </div>
                    <div class="chooseInsert">
                    </div>
                    <div class="chooseArea">
                        <!-- <dl>
                            <dt>选择颜色</dt>
                            <dd>金色</dd>
                            <dd>银色</dd>
                            <dd>黑色</dd>
                        </dl>
                        <dl>
                            <dt>内存容量</dt>
                            <dd>16G</dd>
                            <dd>32G</dd>
                            <dd>64G</dd>
                            <dd>128G</dd>
                        </dl>
                        <dl>
                            <dt>选择版本</dt>
                            <dd>公开版</dd>
                            <dd>移动版</dd>
                        </dl>
                        <dl>
                            <dt>选择优惠</dt>
                            <dd>官方标配</dd>
                            <dd>移动优惠版</dd>
                            <dd>电信优惠版</dd>
                        </dl> -->
                    </div>
                    <div class="goodsNum">
                        <div class="num">
                            <input type="text" value="1" readonly>
                            <button class="plus">+</button>
                            <button class="mins">-</button>
                        </div>
                        <div class="addCart">加入购物车</div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 商品详情展示页 -->
        <div class="productDetial">
            <aside class="aside">
                <div class="tabTitle">
                    <h4 class="active">相关分类</h4>
                    <h4>推荐品牌</h4>
                </div>
                <div class="tabContent">
                    <div class="tab-pane active">
                        <ul class='partList'>
                            <li><a href="javascript:;"> 手机</a></li>
                            <li><a href="javascript:;">手机壳</a></li>
                            <li><a href="javascript:;">内存卡</a></li>
                            <li><a href="javascript:;">Iphone配件</a></li>
                            <li><a href="javascript:;">贴膜</a></li>
                            <li><a href="javascript:;">手机耳机</a></li>
                            <li><a href="javascript:;">移动电源</a></li>
                            <li><a href="javascript:;">平板电脑</a></li>
                        </ul>
                        <ul class="goodList">
                            <li>
                                <div class="detailImg"><img src="./images/part01.png" alt=""></div>
                                <h4>Apple苹果iPhone 6s (A1699)</h4>
                                <p>¥6088.00</p>
                                <div class="addCart"><a href="">加入购物车</a></div>
                            </li>
                            <li>
                                <div class="detailImg"><img src="./images/part01.png" alt=""></div>
                                <h4>Apple苹果iPhone 6s (A1699)</h4>
                                <p>¥6088.00</p>
                                <div class="addCart"><a href="">加入购物车</a></div>
                            </li>
                            <li>
                                <div class="detailImg"><img src="./images/part01.png" alt=""></div>
                                <h4>Apple苹果iPhone 6s (A1699)</h4>
                                <p>¥6088.00</p>
                                <div class="addCart"><a href="">加入购物车</a></div>
                            </li>
                            <li>
                                <div class="detailImg"><img src="./images/part01.png" alt=""></div>
                                <h4>Apple苹果iPhone 6s (A1699)</h4>
                                <p>¥6088.00</p>
                                <div class="addCart"><a href="">加入购物车</a></div>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane">
                        推荐品牌
                    </div>
                </div>
            </aside>
            <div class="detail">
                <div class="fitting">
                    <h4 class="kt">选择搭配</h4>
                    <div class="good-suits">
                        <div class="master">
                            <img src="./images/l-m01.png" alt="">
                            <p>¥5299</p>
                            <i>+</i>
                        </div>
                        <ul class="suits">
                            <li class="suitsItem">
                                <img src="./images/dp01.png" alt="">
                                <p>Feless费勒斯VR</p>
                                <label>
                                    <input type="checkbox" value="39">
                                    <span>39</span>
                                </label>
                            </li>
                            <li class="suitsItem">
                                <img src="./images/dp02.png" alt="">
                                <p>Feless费勒斯VR</p>
                                <label>
                                    <input type="checkbox" value="50">
                                    <span>50</span>
                                </label>
                            </li>
                            <li class="suitsItem">
                                <img src="./images/dp03.png" alt="">
                                <p>Feless费勒斯VR</p>
                                <label>
                                    <input type="checkbox" value="59">
                                    <span>59</span>
                                </label>
                            </li>
                            <li class="suitsItem">
                                <img src="./images/dp04.png" alt="">
                                <p>Feless费勒斯VR</p>
                                <label>
                                    <input type="checkbox" value="99">
                                    <span>99</span>
                                </label>
                            </li>
                        </ul>
                        <div class="result">
                            <div class="num">已选购0件商品</div>
                            <p class="price-tit">套餐价</p>
                            <p class="price">¥5299</p>
                            <button class="addShopcar">加入购物车</button>
                        </div>
                    </div>
                </div>
                <div class="intro">
                    <ul class="tab-wraped">
                        <li class="active">
                            <a href="###">商品介绍</a>
                        </li>
                        <li class="">
                            <a href="###">规格与包装</a>
                        </li>
                        <li class="">
                            <a href="###">售后保障</a>
                        </li>
                        <li class="">
                            <a href="###">商品评价</a>
                        </li>
                        <li class="">
                            <a href="###">手机社区</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div id="one" class="tab-pane active">
                            <ul class="goods-intro">
                                <li>分辨率：1920*1080(FHD)</li>
                                <li>后置摄像头：1200万像素</li>
                                <li>前置摄像头：500万像素</li>
                                <li>核 数：其他</li>
                                <li>频 率：以官网信息为准</li>
                                <li>品牌： Apple</li>
                                <li>商品名称：APPLEiPhone 6s Plus</li>
                                <li>商品编号：1861098</li>
                                <li>商品产地：中国大陆</li>
                                <li>商品毛重：0.51kg</li>
                                <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                <li>系统：苹果（IOS）</li>
                                <li>像素：1000-1600万品毛重：0.51kg</li>
                                <li>机身内存：64GB</li>
                            </ul>
                            <div class="intro-detail">
                                <img src="./images/intro01.png" alt="">
                                <img src="./images/intro02.png" alt="">
                                <img src="./images/intro03.png" alt="">
                            </div>
                        </div>
                        <div id="two" class="tab-pane">规格与包装</div>
                        <div id="three" class="tab-pane">售后保障</div>
                        <div id="four" class="tab-pane">商品评价</div>
                        <div id="five" class="tab-pane">手机社区</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/data.js"></script>
    <script>
        window.addEventListener("DOMContentLoaded", function () {

            //放大镜和缩略图数据
            thumbnailData();

            function thumbnailData() {
                var imgsrc = goodData.imgsrc;
                var oList = document.querySelector('.previewArea .prescroll .listOut .list');
                imgsrc.forEach(function (item, index) {
                    //生成li元素
                    var newLi = document.createElement("li");
                    //生成img元素
                    var oImg = new Image();
                    //给img一个src
                    oImg.src = item.s;
                    //把img放在li中
                    newLi.appendChild(oImg);
                    //把li插入到list中
                    oList.appendChild(newLi)
                })
            }

            //放大镜效果
            preview();

            function preview() {
                var oSmallArea = document.querySelector('.previewArea .preview .smallArea');
                var oSmallAreaImg = document.querySelector('.previewArea .preview .smallArea img');
                var oMask = document.querySelector('.previewArea .preview .smallArea .mask');
                var oBigArea = document.querySelector('.previewArea .preview .bigArea');
                var oBigAreaImg = document.querySelector('.previewArea .preview .bigArea img');

                //先给小图和大图根据数据设置路径
                var imgsrc = goodData.imgsrc;
                oSmallAreaImg.src = imgsrc[0].s;
                oBigAreaImg.src = imgsrc[0].b;

                oSmallArea.onmousemove = function (e) {
                    //让蒙版和大图显示
                    oMask.style.display = "block";
                    oBigArea.style.display = "block";

                    //让蒙版跟随移动（保持鼠标在蒙版的正中心）
                    //蒙版的定位就是 鼠标到视口的距离 - 小图到视口的距离 - 蒙版宽度的一半
                    var maskLocation = {
                        left: e.clientX - oSmallAreaImg.getBoundingClientRect().left - oMask
                            .offsetWidth / 2,
                        top: e.clientY - oSmallAreaImg.getBoundingClientRect().top - oMask
                            .offsetHeight / 2,
                    }
                    // console.log(maskLocation);

                    //判断临界值
                    if (maskLocation.left < 0) {
                        maskLocation.left = 0
                    } else if (maskLocation.left >= oSmallAreaImg.clientWidth - oMask.offsetWidth) {
                        maskLocation.left = oSmallAreaImg.clientWidth - oMask.offsetWidth
                    }

                    if (maskLocation.top < 0) {
                        maskLocation.top = 0
                    } else if (maskLocation.top >= oSmallAreaImg.clientHeight - oMask.offsetHeight) {
                        maskLocation.top = oSmallAreaImg.clientHeight - oMask.offsetHeight
                    }

                    //赋值
                    oMask.style.left = maskLocation.left + "px";
                    oMask.style.top = maskLocation.top + "px";

                    //计算比例
                    //蒙版走的/蒙版能走的 = 大图走的/大图能走的
                    //大图走的 = 大图能走的/蒙版能走的 * 蒙版走的
                    var scale = (oBigAreaImg.offsetWidth - oBigArea.clientWidth) / (oSmallAreaImg
                        .clientWidth - oMask.offsetWidth);

                    var bigImgChange = {
                        left: maskLocation.left * scale,
                        top: maskLocation.top * scale
                    }

                    //赋值
                    oBigAreaImg.style.left = -bigImgChange.left + "px";
                    oBigAreaImg.style.top = -bigImgChange.top + "px";

                }
                //鼠标移出放大镜区域
                oSmallArea.onmouseleave = function () {
                    //让蒙版和大图消失
                    oMask.style.display = "none";
                    oBigArea.style.display = "none";
                }
            }


            //缩略图动画
            thumbnailMove();

            function thumbnailMove() {
                var oLeft = document.querySelector('.previewArea .prescroll .left');
                var oRight = document.querySelector('.previewArea .prescroll .right');
                var oList = document.querySelector('.previewArea .prescroll .listOut .list');
                var oListLis = document.querySelectorAll('.previewArea .prescroll .listOut .list li');
                //初始值
                var startLocation = 0;
                //每次移动的距离（两个li的宽度）
                var everyLocation = 2 * oListLis[0].offsetWidth;
                //外层最多可以移动的距离
                var allMove = (oListLis.length - 5) * oListLis[0].offsetWidth;


                //给右侧按钮绑定点击事件
                oRight.onclick = function () {
                    //先判断是否还能走两个(剩余距离是否小于每次移动的距离)
                    if (allMove - startLocation >= everyLocation) {
                        //每次点击 让初始值累加每次移动的距离
                        startLocation += everyLocation;
                    } else {
                        //剩余不满两个，则直接让走到末尾
                        startLocation = allMove;
                    }

                    //赋值
                    oList.style.transform = "translateX(-" + startLocation + "px)";

                }


                //给右侧按钮绑定点击事件
                oLeft.onclick = function () {
                    //如果已经移动的值大于每次走的值，则继续走两个
                    if (startLocation > everyLocation) {
                        startLocation -= everyLocation;
                    } else {
                        startLocation = 0;
                    }

                    //赋值
                    oList.style.transform = "translateX(-" + startLocation + "px)";

                }
            }


            //缩略图点击
            thumbnailClick();

            function thumbnailClick() {
                var oListLis = document.querySelectorAll('.previewArea .prescroll .listOut .list li');
                var oSmallAreaImg = document.querySelector('.previewArea .preview .smallArea img');
                var oBigAreaImg = document.querySelector('.previewArea .preview .bigArea img');
                var imgsrc = goodData.imgsrc;
                //给所有的li绑定点击事件
                oListLis.forEach(function (item, index) {
                    item.onclick = function () {
                        //index就是当前点击元素的下标，也是在数据中的下标
                        //直到点击后下标了，可以直接通过数据拿到放大镜所需要的的图片
                        oSmallAreaImg.src = imgsrc[index].s;
                        oBigAreaImg.src = imgsrc[index].b;
                    }
                })
            }


            //详细数据
            detailData();

            function detailData() {
                var oPriceArea = document.querySelector('.priceArea');
                //获取数据
                var goodsDetail = goodData.goodsDetail;
                //获取替换内容的字符串
                var str = '<h3 class="title">' + goodsDetail.title + '</h3>\
                        <p class="con1">' + goodsDetail.recommend + '</p>\
                        <div class="price">\
                            <div class="priceDetail">\
                                <p>价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>\
                                <p>￥ <span>' + goodsDetail.price + '</span> 元</p>\
                            </div>\
                            <div class="buy">\
                                <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>\
                                <p><span>' + goodsDetail.promoteSales.type + '</span>' + goodsDetail.promoteSales
                    .content + '</p>\
                            </div>\
                        </div>\
                        <div class="support">\
                            <div class="supportDetail">\
                                <p>支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>\
                                <p>' + goodsDetail.support + '</p>\
                            </div>\
                            <div class="address">\
                                <p>配&nbsp;送&nbsp;至</p>\
                                <p>' + goodsDetail.address + '</p>\
                            </div>\
                        </div> ';

                //把字符串设置给页面中
                oPriceArea.innerHTML = str;
            }


            //筛选数据
            chooseData();

            function chooseData() {
                var oChooseArea = document.querySelector('.chooseArea');
                //获取数据
                var crumbData = goodData.goodsDetail.crumbData;
                //遍历数据
                crumbData.forEach(function (item, index) {
                    //根据数据生成dl元素
                    var oDl = document.createElement("dl");
                    //生成dt
                    var oDt = document.createElement("dt");
                    //给dt写入内容
                    oDt.textContent = item.title;
                    //把Dt放在Dl中
                    oDl.appendChild(oDt)

                    //遍历数据生成dd
                    item.data.forEach(function (item, index) {
                        //生成dd
                        var oDd = document.createElement("dd");
                        //给dd内容
                        oDd.textContent = item.type;
                        //给dd保存的一个当前的价格改变
                        oDd.dataset.changePrice = item.changePrice;
                        //把dd插如到dl中
                        oDl.appendChild(oDd)
                    })

                    //把当次生成的dl插入到页面中
                    oChooseArea.appendChild(oDl)
                })
            }

            //筛选点击
            chooseClick();

            function chooseClick() {
                var oChooseInsert = document.querySelector('.chooseInsert');
                //获取所有的dl
                var oDl = document.querySelectorAll('.chooseArea dl');
                //初始化一个数组(用来保存点击选中的值)
                var arr = new Array(oDl.length);
                //遍历dl获取每一个dl中的所有的dd
                oDl.forEach(function (item, index) {
                    //从当前的dl（item）中 获取他所有的dd
                    var oDlDd = item.querySelectorAll("dd");
                    // console.log(oDlDd);

                    //给当前dl中所有的dd绑定点击事件
                    oDlDd.forEach(function (item, i) {
                        item.onclick = function () {
                            //清空当前dl中所有dd的样式 然后再重新添加样式
                            oDlDd.forEach(function (item, index) {
                                item.style.color = "#666"
                            })
                            //给当前点击的元素添加
                            this.style.color = "red";


                            //点击以后，把当前点击的元素添加到数组中
                            arr[index] = item;
                            // console.log(arr); 

                            //遍历arr添加mark之前，先把原来的mark清空
                            oChooseInsert.textContent = "";
                            //数组改变之后，遍历数组，根据数组的内容生成元素并插入到页面中
                            arr.forEach(function (item, index) {
                                //判断当前数组的值是否为空
                                if (!item) {
                                    return;
                                }

                                //根据保存的值生成mark标签
                                var oMark = document.createElement("mark");
                                //把item的内容给mark
                                oMark.textContent = item.textContent;
                                //向mark中插入删除按钮
                                var oA = document.createElement("a");
                                oA.textContent = "X";
                                //给a标签一个自定义属性，保存的是当前点击元素所在的dl的下标
                                oA.dataset.index = index;
                                oMark.appendChild(oA);

                                //把mark插入到页面中
                                oChooseInsert.appendChild(oMark)
                            })




                            //改变价格
                            price(arr)


                            //在生成mark标签的时候给所有的mark标签绑定删除事件
                            //获取所以mark的a标签
                            var oDeles = document.querySelectorAll('mark a');
                            oDeles.forEach(function (item, index) {
                                item.onclick = function () {
                                    //删除当前的mark
                                    item.parentNode.remove();

                                    //删除数组中的值
                                    arr[item.dataset.index] = null;

                                    //把删除元素的对应的dl中所有的dd全部清空颜色，选中第一个是默认颜色
                                    var nowDds = oDl[item.dataset.index]
                                        .querySelectorAll(
                                            "dd")
                                    nowDds.forEach(function (item, index) {
                                        item.style.color = "#333"
                                    })
                                    nowDds[0].style.color = "red";


                                    //改变价格
                                    price(arr);
                                }
                            })
                        }
                    })
                })

            }
            //计算价格函数
            function price(arr) {
                console.log(1);
                //改变价格
                var oSinglePrice = document.querySelector(
                    '.priceDetail p span');
                //单价
                var singlePrice = goodData.goodsDetail
                    .price;

                //计算价格,遍历数据得到改变的价钱 然后和默认价格累加
                arr.forEach(function (item, index) {
                    if (!item) {
                        return;
                    }
                    singlePrice += +item.dataset
                        .changePrice;
                })

                //获取数量
                var oIpt = document.querySelector('.num input');
                var num = +oIpt.value;
                //把单价设置到元素中
                oSinglePrice.textContent = singlePrice * num;
            }



            //数量的点击
            numClick();

            function numClick() {
                var oPlus = document.querySelector('.plus');
                var oMins = document.querySelector('.mins');
                var oIpt = document.querySelector('.num input');
                //初始值
                var num = 1;
                oPlus.onclick = function () {
                    //每次点击的时候获取最新的价格
                    var oSinglePrice = document.querySelector(
                        '.priceDetail p span');
                    var newPrice = +oSinglePrice.textContent;

                    //数量改变
                    num++;
                    oIpt.value = num;

                    //计算价格 让数量乘以单价
                    oSinglePrice.textContent = newPrice / (num - 1) * num;
                }

                oMins.onclick = function () {
                    //每次点击的时候获取最新的价格
                    var oSinglePrice = document.querySelector(
                        '.priceDetail p span');
                    var newPrice = +oSinglePrice.textContent;
                    //数量改变
                    num--;
                    if (num <= 0) {
                        num = 1;
                        return;
                    }
                    oIpt.value = num;

                    //计算价格 让数量乘以单价
                    oSinglePrice.textContent = newPrice / (num + 1) * num;
                }

            }


            //选项卡切换
            function Tab(oTitles, oCons) {
                this.oTitles = oTitles;
                this.oCons = oCons;
                var _this = this;
                //给所有的标题绑定点击事件
                oTitles.forEach(function (item, index) {
                    item.onclick = function () {
                        _this.click(index);
                    }
                })
            }
            Tab.prototype.click = function (i) {
                var _this = this;
                //先清空所有标题的样式和内容的样式
                this.oTitles.forEach(function (item, index) {
                    item.classList.remove("active");
                    _this.oCons[index].classList.remove("active");
                })

                //给当前的添加
                this.oTitles[i].classList.add("active");
                this.oCons[i].classList.add("active");
            }


            //侧边栏Tab
            asideTab();

            function asideTab() {
                //获取所有的标题
                var oTabTitles = document.querySelectorAll('.tabTitle h4');
                var oTabContent = document.querySelectorAll('.tabContent .tab-pane');
                new Tab(oTabTitles, oTabContent);
            }

            //内容区域的Tab
            conTab();

            function conTab() {
                //获取所有的标题
                var oTabTitles = document.querySelectorAll('.tab-wraped li');
                var oTabContent = document.querySelectorAll('.tab-content .tab-pane');
                new Tab(oTabTitles, oTabContent);
            }


            //侧边栏效果
            aside();

            function aside() {
                var oToolBar = document.querySelector('.toolBar');
                var oMenu = document.querySelector('.menu');
                var flag = false; //初始化一个开关代表关闭状态
                oMenu.onclick = function () {
                    if (flag) {
                        oToolBar.style.right = "-294px"
                    } else {
                        oToolBar.style.right = "0px"
                    }
                    flag = !flag;
                }
            }

        })
    </script>
</body>

</html>